<template>
  <div class="cart">
    <div class="address">
      <van-cell is-link @click="show = true" class="pop">
        <img src="//jstatic.3.cn/static/icon_location_jd@2x.9ca2376c.png" alt="">
        <span>西安市雁塔区</span>
      </van-cell>
      <!-- 自定义 -->
      <van-action-sheet v-model="show" title="选择地址">
        <div class="txt">
          <van-radio-group v-model="radio">
            <van-radio name="1" checked-color="#ee0a24">雁塔区</van-radio>
            <van-radio name="2" checked-color="#ee0a24">高新区</van-radio>
          </van-radio-group>
          <van-button round color="linear-gradient(to right, #ff6034, #ee0a24)">
            新增其他地址
          </van-button>
        </div>
      </van-action-sheet>
      <p>编辑商品</p>
    </div>
    <!-- 满减 、全选-->
    <p class="minus">
      <span>全部(64)</span>
      <span>跨店满减(0)</span>
    </p>
    <div class="goods" v-for="(v, index) in list" :key="index" ref="ref1">
      <input type="checkbox" @change="newState(index, $event)" :checked="v.flag">
      <van-card :price="v.originprice" desc="描述信息" :title="v.proname" :thumb="v.img1">
        <template #tags>
          <!-- 加减器 -->
          <Counter :num="v.num" :id="index"></Counter>
        </template>
        <template #footer>
          <van-button size="mini">移入关注</van-button>
          <van-button size="mini" @click="del(index)">删除</van-button>
        </template>
      </van-card>
    </div>
    <!-- 订单 -->
    <toSubmitBar :isFull="fullState" :sum="goodsTotal" @isChecked="getState" :total="totalNum"></toSubmitBar>
    <toFoot2 :cart="cart" :my="my" current="1"></toFoot2>
  </div>

</template>

<script>
import toFoot2 from '../../pageOne/tao/toFoot2.vue'
import toCoun from './toCoun.vue'
import toSubmitBar from './toSubmitBar.vue'

export default {

  data() {
    return {
      cart: "https://img.alicdn.com/imgextra/i4/O1CN01ObHTOR1eBYqyxZmvV_!!6000000003833-2-tps-63-63.png",
      my: "https://img.alicdn.com/imgextra/i3/O1CN01nOAkIZ1ou7XqRzXEZ_!!6000000005284-2-tps-63-63.png",

      show: false,
      actions: [{ name: '选项一' }, { name: '选项二' }, { name: '选项三' }],
      radio: '1',
      value: 1,
      list: [],
      cur: 0,
      token: '',
      userid: ''
    };
  },
  components: {
    toSubmitBar,
    toFoot2,
    toCoun
  },
  created() {
    this.initCartList(),
      this.$bus.$on('numAdd', v => {
        this.list.some((item, index) => {
          if (index == v.id) {
            item.num = v.num
            return true
          }
        })
      }),
      this.$bus.$on('numDec', v => {

        // v是传来的num，用some循环，一旦符合条件。return
        this.list.some((item, index) => {
          if (index == v.id) {
            item.num = v.num
            return true
          }
        })
      })
  },
  methods: {
    // 动作面板
    onSelect(item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      this.show = false;
      Toast(item.name);
    },
    // 封装请求列表数据的方法
    async initCartList() {
      // 调用 axios 的 get 方法，请求列表数据
      // 解构赋值，拿到data赋值给res

      // const { data: res } = await this.$http.get('https://www.escook.cn/api/cart')
      // // 只要请求回来的数据，在页面渲染期间要用到，则必须转存到 data 中
      //     this.list = res.list

    },
    newState(index, e) {
      this.list.some((item, index1) => {
        //接口id是从1开始，index从0开始
        if (index == index1) {
          item.flag = e.target.checked
          // 终止后续的循环
          return true
        }
      })
    },
    getState(v) {
      this.list.forEach(item => item.flag = v)
    },
    // 点击删除goods
    del(index) {
      //点击删除接口 
      this.cur = index
      // console.log(this.$refs.ref1);this.$refs.ref1拿到数组
      this.$refs.ref1[this.cur].remove()
    }

  },
  async mounted() {
    // 接收token
    this.token = this.$route.query.token
    this.userid = this.$route.query.userid

    //查看购物车
    const { data: res } = await this.$http.post('http://118.178.238.19:3001/api/cart/list', {
      token: this.token,
      userid: this.userid,
    })
    this.list = res.data
    console.log(res.data);
  },

  computed: {
    // 如果状态都为true，返回true，否则false，函数名是返回的值
    // 返回item.goods_state===true，可以简写
    fullState() {
      return this.list.every(item => item.flag)
    },
    //    计算接口中已经选中的商品总价格，规范先属性，后指令
    goodsTotal() {
      // 一定要有return
      return this.list.filter(item => item.flag).reduce((total, item) => total += item.originprice * item.num, 0)

    },
    // 计算选中的总数量
    totalNum() {
      const result = this.list.filter(item => item.flag).reduce((total, item) => total += item.num, 0)
      return `结算(${result}件)`
    }

  }

}
</script>

<style scoped>
.address {
  height: .98rem;
  display: flex;
  justify-content: space-around;
  background: #fff;
  align-items: center;
}

.van-popup {
  width: 7.5rem;
}
.pop {
  width: 4.8rem;
}
::v-deep .van-cell img{
  position: relative;
  top: 6px;
}
.pop>img {
  width: .24rem;
  vertical-align: middle;
  margin-right: .2rem;
}

.pop>span::after {
  content: '';
  width: .02rem;
  height: .24rem;
  background: #bfbfbf;
  position: absolute;
  top: 1.24rem;
  left: 5.6rem
}

/*地址弹窗 */
.txt {
  padding: .32rem .32rem 3.2rem;
}

.van-action-sheet {
  height: 9.54rem;
}

.van-radio {
  margin-bottom: .6rem;
}

.van-button--round {
  width: 7.1rem;
  margin-top: -0.14rem;
  text-align: center;
  position: absolute;
  bottom: .26rem;
}

.minus {
  display: flex;
  align-items: center;
  height: .7rem;
  background: #fff;
  margin: .2rem 0;
}

.minus>span {
  margin-left: .2rem;
}

.minus>span:nth-child(1) {
  color: #fa2419;
}

.minus>span:nth-child(2) {
  color: #999;
}

.goods {
  display: flex;
  background: #fff;
  align-items: center;
  justify-content: space-around;
}

.goods>input {
  width: 1rem;
  border-radius: 100%;

}

::v-deep .van-card {
  flex: 1;
  padding: .16rem 0;
  padding-right: .16rem;
  background-color: #fff
}

.van-cell__value--alone img {
  width: .24rem;
  height: .24rem;
  margin-right: .2rem;
}

/* pic大小 */
.van-card__thumb {
  width: 2rem;
}

/* 步进器 */
.van-stepper {
  width: 1.84rem;
  position: absolute;
  right: .16rem;
  bottom: 0;
}

::v-deep .van-submit-bar {
  bottom: 1rem;
  width: 7.5rem;
}
</style>